<style scoped>
    .index {
        width: 100%;
    }
    .pet-mb-32 {
        margin-bottom: 32px;
    }
    .pet-mb-160 {
        margin-bottom: 160px;
    }
    .pet-avatar {
        border-radius: 50%;
        width: 160px;
        height: 160px;
        padding: 8px;
    }
    .pet-pb-16 {
        padding-bottom: 16px;
    }
    .pet-pt-16 {
        padding-top: 16px;
    }
    .pet-img-upload {
        width: 64px;
        height:64px;
        line-height: 64px;
        background: #fff;
        border: 1px dashed #dddee1;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .pet-upload-image img {
        width: 64px;
        height: 64px;
    }
    .pet-upload-image-cover{
        width: 64px;
        height: 64px;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
        text-align: center;
    }
    .pet-upload-image:hover .pet-upload-image-cover{
        display: block;
    }
    .pet-upload-image-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
        vertical-align: middle;
        transform: translateY(50%);
        -moz-transform: translateY(50%);
        -webkit-transform: translateY(50%);
    }
    .text-right {
        text-align: right;
    }
    .text-left {
        text-align: left;
    }
    p.text-right {
        margin-right: 8px;
    }
</style>
<template>
    <div class="index">
        <Row type="flex" justify="center" align="middle" class="pet-mb-32">
            <Col span="12">
                <Steps :current="currentStep">
                    <Step title="填写" content="填写爱宠的相关信息"></Step>
                    <Step title="确认" content="确认爱宠信息无误"></Step>
                    <Step title="完成" content="宠物卡创建完成"></Step>
                </Steps>
            </Col>
        </Row>
        <Row type="flex" justify="center" align="middle" class="pet-mb-160">
            <Col span="12" v-if="currentStep === 0">
                <Form ref="petCardForm" :model="petCardForm" :rules="ruleValidate" :label-width="80">
                    <FormItem label="萌宠照片" prop="avatar">
                        <div v-if="petCardForm.avatar" class="pet-upload-image">
                            <img :src="petCardForm.avatar">
                            <div class="pet-upload-image-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
                                <Icon type="ios-trash-outline" @click.native="handleRemove"></Icon>
                            </div>
                            <input type="hidden" v-model="petCardForm.avatar">
                        </div>
                        <div v-else>
                            <input id="petAvatar" type="file" accept="image/*" style="display: none;" @change="handleImgUpload"/>
                            <label for="petAvatar">
                                <div class="pet-img-upload">
                                    <Icon type="camera" size="20"></Icon>
                                </div>
                            </label>
                        </div>
                    </FormItem>
                    <FormItem label="爱宠名称" prop="name">
                        <Input v-model="petCardForm.name" placeholder="告诉我 ta 的名字吧"></Input>
                    </FormItem>
                    <!-- <FormItem label="出生日期" prop="date">
                        <DatePicker type="date" placeholder="选择爱宠的出生日期" v-model="petCardForm.date"></DatePicker>
                    </FormItem> -->
                    <!-- <FormItem label="主人寄语" prop="desc">
                        <Input v-model="petCardForm.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="你们之间一定有不少趣事..."></Input>
                    </FormItem> -->
                    <FormItem>
                        <Button type="primary" @click="handleNextClick('petCardForm')">下一步</Button>
                    </FormItem>
                </Form>
                <Modal title="萌宠照片" v-model="viewImage">
                    <img :src="petCardForm.avatar" v-if="viewImage" style="width: 100%">
                </Modal>
            </Col>
            <Col span="8" v-if="currentStep === 1">
                <Card class="pet-mb-32">
                    <Row type="flex" justify="center" align="top" class="pet-pt-16 pet-pb-16">
                        <Col span="8">
                            <img class="pet-avatar" :src="petCardForm.avatar" alt="Pepe">
                        </Col>
                        <Col span="16">
                            <div style="margin-top: 32px">
                                <Row type="flex" justify="center" align="top">
                                    <Col span="8">
                                    <p class="text-right"><Icon type="social-octocat"></Icon>爱宠名称</p>
                                    </Col>
                                    <Col span="16">
                                    <p class="text-left">{{ petCardForm.name }}</p>
                                    </Col>
                                    <Col span="8">
                                    <p class="text-right"><Icon type="ios-paw"></Icon>出生日期</p>
                                    </Col>
                                    <Col span="16">
                                    <p class="text-left">{{ fmtBirthday }}</p>
                                    </Col> 
                                    <Col span="8">
                                    <p class="text-right"><Icon type="heart"></Icon>主人寄语</p>
                                    </Col>
                                    <Col span="16">
                                    <p class="text-left">{{ petCardForm.desc }}</p>
                                    </Col>
                                </Row>
                            </div>
                        </Col>
                    </Row>
                </Card>
                <Button type="ghost" @click="currentStep--">上一步</Button>
                <Button type="primary" @click="handleConfirmClick">确定</Button>
            </Col>
            <Col span="12" v-if="currentStep === 2">
                <div style="text-align: center">
                    <h1><img :src="require('../chameleon.png')" alt=""></h1>
                    <h2 class="pet-mb-32">「{{ petCardForm.name }}」的宠物卡已经创建，你可以在「个人中心」-「我的宠物卡」中查看</h2>
                    <p class="pet-mb-32">* 数据写入需要一点时间，如果不能马上看到新创建的宠物卡，可以稍候再刷新查看</p>
                    <router-link to="/">
                        <Button type="primary" size="large">返回首页</Button>
                    </router-link>
                    <router-link to="/account">
                        <Button type="ghost" size="large">个人中心</Button>
                    </router-link>
                </div>
            </Col>
            <Spin size="large" fix v-if="loading"></Spin>
        </Row>
    </div>
</template>
<script>
    import util from '../libs/util';
    import NebPay from '../libs/nebpay';
    import {Account} from 'nebulas';
    import Web3 from "web3";
    import axios from 'axios'


    var nebPay = new NebPay();

    export default {
        data() {
            return {
                account: null,
                strs:'',
                hash:"  ",
                currentStep: 0,
                petCardForm: {
                    name: '',
                    date: '',
                    desc: '',
                    avatar: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '爱宠怎么可以没有一个好听的名字呢', trigger: 'blur' }
                    ],
                    // date: [
                    //     { required: true, type: 'date', message: '不记得 ta 的生日了？想想看 ta 是什么时候成为你的家庭成员的', trigger: 'change' }
                    // ],
                    // desc: [
                    //     { required: true, message: '有什么想对 ta 说的吗', trigger: 'blur' }
                    // ],
                    avatar: [
                        { required: true, message: ' ', trigger: 'change' }
                    ]
                },
                loading: false,
                viewImage: false,
                imageURL: '',
                interval: null,
                exCount: 0
            }
        },
        computed: {
            fmtBirthday() {
                return util.dateFmt(this.petCardForm.date);
            }
        },
        created() {
            this.interval = setInterval(() => {
                if (this.exCount > 5) {
                    clearInterval(this.interval);
                    this.showError();
                }
                this.exCount++;
                this.initAccount();
            }, 1000);
        },
        methods: {
            initAccount() {
                const address = localStorage.getItem('nasAddress');
                if (address) {
                    clearInterval(this.interval);
                    this.account = Account.fromAddress(address);
                }
            },
            handleView() {
                this.viewImage = true;
            },
            handleRemove() {
                this.imageURL = '';
                this.petCardForm.avatar = '';
            },
            handleImgUpload(e) {
                let img = e.target.files[0];
                let reader = new FileReader();

                reader.readAsDataURL(img);
                reader.onload = (arg) => {
                    this.petCardForm.avatar = arg.target.result;
                };

                let formData = new FormData();
                formData.append('smfile',img);
                formData.append('ssl', true);

                util.uploadImg(formData).then(res => {
                    this.imageURL = res.data.data.url;
                }).catch(err => {
                    console.error(err);
                })
            },
            handleNextClick(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.currentStep++;
                    } else {
                        this.$Message.error('请将信息填写完整');
                    }
                })
            },
            handleConfirmClick() {
               

               var strs
        var block_hash
    //获取上传文件时当前时间    
    var myDate = new Date();
    var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var myToday = myDate.getDate(); //获取当前日(1-31)
    var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    var myHour = myDate.getHours(); //获取当前小时数(0-23)
    var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
    var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
    var nowTime;
     nowTime = myYear + '.' + myMonth + '.' + myToday +  '  ' + myHour + ':' + myMinute + ':' + mySecond + '  ' ;
        //console.log(nowTime)
        //console.log(typeof nowTime==="string")

        //获取上传的文件对象
        var uploadfile = this.$refs.upload._data.__ob__.value.uploadFiles[0]
        //console.log(uploadfile)
        var reader = new FileReader()
        reader.readAsBinaryString(uploadfile.raw)
        reader.onload = (e) => {
        // Read file contents 
        var cont = e.target.result
        var web3 = new Web3(new Web3.providers.HttpProvider("http://172.31.227.85:30320"));
        //console.log(web3)
        const str = JSON.stringify(cont);
        this.strs = web3.utils.sha3(str);


         var json;
        json ={
          url:"http://172.31.100.77:8082/api/callback",
          private_key:"677cebe62dce385fdbd5b83dda938fe18cece2d3d5a6652e61c9fa7d3949dc71",
          data:[
            {
          
            file_id:"aaa",
            sha256:"sss",
            sm3:"aaa",
            md5:"jjj",
            request_timestamp:"sss",
            
            } 
          ]
        }
        //json.url=window.location.href
        json.data[0].file_id=this.ruleForm.desc
        json.data[0].sha256=this.strs
        // json.data[0].sm3=this.strs
        // json.data[0].md5=this.strs
        json.data[0].request_timestamp=nowTime

       
        console.log(json.data[0].sha256)
        console.log(json.data[0].file_id);
        console.log(json.data[0].request_timestamp);

        axios.post('/api/api/upload/chain',json,{
          headers:{
            'Content-Type':'application/json'
          }
        }).then((res)=>{
          this.$message({
            message: '上传成功，可在右侧查看链上信息',
            type: 'success'
          });
        //对返回数据进行处理
          console.log(res)
          this.hash=res.data.block_hash
          this.ruleForm.block_height=res.data.block_height
          this.ruleForm.block_timestamp=res.data.block_timestamp
         // this.ruleForm.contractAddress=res.data.data[0].contract_addr
          this.ruleForm.transactionHash=res.data.tran_hash
          //this.ruleForm.trust_timestamp=res.data.data[0].trust_timestamp
          this.ruleForm.file_id=res.data.file_id

        }).catch((error)=>{
          console.log(error)
          //this.$message.error('上传失败，请重新上传');
        })
        }
        
     
            },
            handleCreate(info) {
                let to = util.getContractAddress(),
                    args = util.toSting([info]);
                nebPay.call(to, '0', 'createPetCard', args, {
                    listener: (data) => {
                        if (typeof data === 'object') {
                            this.currentStep++;
                        } else {
                            this.$Modal.error({
                                title: '创建失败',
                                content: '交易被取消，宠物卡创建失败'
                            });
                        }
                        this.loading = false;
                    }
                });
            }
        }
    };
</script>